<template>
  <div>
  <el-collapse v-model="activeNames">
    <el-collapse-item title="Ph.D. Students" name="Phd">
      <OfficalInfoCard 
        v-for="(i,index) in phd"
        :key="index"
        :hname    = "i.hname"
        :name     = "i.name"
        degree   = "Ph.D. Student"
        :email    = "i.email"
        :synopsis = "i.synopsis"
        :imgUrl   = "i.imgUrl"
      />
    </el-collapse-item>
    <el-collapse-item title="Master Students" name="Master">
      <OfficalInfoCard 
        v-for="(i,index) in master"
        :key="index"
        :hname    = "i.hname"
        :name     = "i.name"
        degree    = "Master Student"
        :email    = "i.email"
        :synopsis = "i.synopsis"
        :imgUrl   = "i.imgUrl"
      />
    </el-collapse-item>
    <el-collapse-item title="Undergraduate Students" name="Undergraduate">
      <OfficalInfoCard 
        v-for="(i,index) in undergraduate"
        :key="index"
        :hname    = "i.hname"
        :name     = "i.name"
        degree    = "Undergraduate Student"
        :email    = "i.email"
        :synopsis = "i.synopsis"
        :imgUrl   = "i.imgUrl"
      />
    </el-collapse-item>
  </el-collapse>
  </div>
</template>

<script>
import OfficalInfoCard from './OfficalInfoCard.vue'

export default {
  components: { OfficalInfoCard },
  data() {
    return {
      activeNames: ["Phd","Master","Undergraduate"],
      phd: [],
      master: [],
      undergraduate: []
    };
  },
  created() {
    this.$http.get('/json/PeopleOffical.json').then((response) => {
      // console.log(response);
      this.phd = response.data.phd;
      this.master = response.data.master;
      this.undergraduate = response.data.undergraduate;
    });

  }

};
</script>

<style lang="less" scoped>
@import "../el-collapse-item.less";
</style>
